.device-select-trigger {
  box-sizing: border-box;
  flex-shrink: 1;
  padding: 0px 10px;
  font-size: 13px;
  cursor: pointer;
  border: 0px solid transparent;
  border-radius: 18px;
  height: var(--swm-button-size);
  color: var(--swm-device-select-trigger-text);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-select-trigger:hover {
  background-color: var(--swm-device-select-trigger-hover);
}
.device-select-trigger[data-state="open"] {
  border-radius: 0 0 18px 0;
}
.device-select-trigger[data-disabled] {
  background-color: var(--swm-device-select-trigger-disabled);
  color: var(--swm-secondary-text);
  pointer-events: none;
}
.device-select-trigger:focus {
  box-shadow: var(--swm-focus-outline);
}

.device-select-value {
  display: flex;
  align-items: center;
  gap: 5px;
}

.device-select-value-text {
  height: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}

.device-select-content {
  overflow: hidden;
  background-color: var(--swm-device-select-background);
  width: var(--swm-device-select-width);
  border-radius: 18px;
  border: var(--swm-dropdown-border);
  box-shadow: var(--swm-dropdown-shadow);
  padding-top: 4px;
  max-height: var(--radix-select-content-available-height);
  box-shadow: var(--swm-backdrop-shadow);
}

.device-select-viewport {
  padding: 6px;
}

.device-select-separator {
  height: 1px;
  background-color: var(--swm-device-select-separator);
  margin: 2px 0;
  width: 100%;
}

.device-select-item {
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--swm-default-text);
}
.device-select-item[data-highlighted] {
  outline: none;
  background-color: var(--swm-device-select-highlighted);
  cursor: pointer;
}
.device-select-item[data-disabled] {
  color: var(--swm-device-select-disabled-text);
  pointer-events: none;
}
.device-select-viewport .device-select-item:last-child {
  border-radius: 4px 4px 12px 12px;
}

.device-select-label {
  padding: 0 10px;
  font-size: 12px;
  line-height: 25px;
  color: var(--swm-device-select-label);
  user-select: none;
}

.device-select-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

.device-select-counter {
  display: inline-block;
  border: 0px solid transparent;
  border-radius: 4px;
  color: var(--swm-button-counter);
  background-color: var(--swm-button-counter-background);
  border: 1px solid var(--swm-button-counter-border);
  padding: 2px 4px;
  font-size: 10px;
  transition:
    left 200ms ease-in-out,
    opacity 200ms ease-in-out;
}

.running-badge-button {
  cursor: pointer;
}

.running-badge-button:hover {
  background-color: var(--swm-device-select-stop-badge-background);
  color: var(--swm-device-select-stop-badge-foreground);
}

/* Invisible text for layout stability */
.running-badge-button::before {
  content: "Running";
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
}

/* Actual visible text */
.running-badge-button span {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.running-badge-button:hover span::before {
  content: "Stop";
}

.running-badge-button span::before {
  content: "Running";
}

.vscode-high-contrast .running-badge-button[variant="activity-bar-counter"] {
  background-color: var(--swm-button-background);
  color: var(--swm-button-hover);
}
